<template>
  <div class="type-wrap">
    <G_header :navData="navData"/>
    <van-radio-group v-model="radio">
      <van-cell-group @click="changeType" title="提现方式">
        <!-- <van-cell icon="wechat" title="提现到微信" clickable @click="radio = '1'">
          <van-radio slot="right-icon" checked-color="#07c160" name="1" />
        </van-cell> -->
        <van-cell icon="card" title="提现到银行卡"  clickable @click="radio = '2'">
          <van-radio slot="right-icon" checked-color="#07c160" name="2" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-cell-group v-if="radio=='2'">
      <van-field v-model="card.name" required clearable label="收款人" placeholder="请输入姓名" />
      <van-field v-model="card.cardInfo" required clearable label="开户行信息" placeholder="开户行信息" />
      <van-field v-model="card.cardNum" type="number" required clearable label="银行卡卡号" placeholder="请输入银行卡卡号" />
      
      <van-field v-model="card.phoneNum" type="number" required clearable label="手机号" placeholder="请输入手机号" />
    </van-cell-group>
    <div class="box">
      <p class="title">提现金额</p>
      <div class="money">
        <input type="number" v-model="realMoney">
      </div>
      <span :class="realMoney == money ? 'D_none' : ' '" style="color:#909399">当前可提现余额  {{ money }} 元, </span><span :class="realMoney == money ? 'D_none' : ' '" style="color: #409EFF" @click="allMoney"> 全部提现</span>
      <p><van-button block type="primary" @click="pay">提现</van-button></p>
    </div>
  </div>
</template>

<script>
import G_header from '@/components/Header'
import { Notify } from 'vant';
import { Toast } from 'vant';
export default {
  name: "Type",
  data() {
    return {
      radio: '2',
      card:{
        name:'',
        phoneNum: '',
        cardNum: '',
        cardInfo:''
      },
      realMoney: null,
      money: 0.00,
      navData:{
        title:"提现中心"
      }
    }
  },
  created(){
    this.getUserInfo();
  },
  methods: {
    changeType(){
      console.log(this.radio)
    },
    allMoney(){
      this.realMoney = this.money
    },
    pay(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      params.realname = this.card.name;
      params.bank = this.card.cardInfo;
      params.card = this.card.cardNum;
      params.mobile = this.card.phoneNum;
      params.money = this.realMoney;
      if( this.card.name == ''){
        Toast('联系人为空');
      }else if(this.card.cardInfo == ''){
        Toast('开户行为空');
      }else if(this.card.phoneNum == ''){
        Toast('手机号为空');
      }else if(this.card.cardNum ==''){
        Toast('请输入银行卡');
      }else if(this.realMoney>this.userInfo.account.money){
        Toast('可提现余额不足');
      }else {
        this.axios.post('/api/store/user/withdrawal/create',params).then(res=>{
          this.getUserInfo()
          Notify({ type: 'primary', message: res.data.message,background:'#07c160' });
          // this.$route.path({name:'withdraw'})
      }).catch(err=>{
        console.log(err);
      })
      }
      
    },
    getUserInfo() {
      let accessToken = this.global.state.accessToken || sessionStorage.getItem("token");
      this.axios.get('/api/wechatofficial/mine?token=' + accessToken).then(result => {
              this.userInfo = result.data.data;
              this.money = this.userInfo.account.money;
              this.global.state.userInfo = this.userInfo;
              this.global.state.storeInfo = this.userInfo.stores;
          })
          .catch(error => {
              console.log(error)
          });
    }
  },
  components:{
    G_header
  }
};
</script>
<style scoped>
.box {
  width: 90%;
  background-color: white;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5px 1.3rem;
  border-radius: 4px;
  margin-top: 10px;
}
.box p.title {
  margin: .5rem 0;
}
.box input {
  border: none;
  width: 100%;
  font-size: 28px;
  margin: auto 0;
  padding-left: 1.5rem;
}
.box .money {
  width: 96%;
  margin: 18px auto;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 1px solid rgba(170,170,170,.3);
}
.box .money::before {
  content: ' ¥ ';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 20px;
  font-size: 28px;
}
</style>
